<template>
    <v-container :fluid="true" class="pa-0">
        <!-- 个人信息头部卡片 -->
        <v-card class="profile-card mb-6" rounded="xl" elevation="3">
            <!-- 背景图片区域  src="https://cdn.vuetifyjs.com/images/parallax/material.jpg"  -->
             <!-- https://images.unsplash.com/photo-1620641788421-7a1c342ea42e?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1920&q=80 -->
            <v-img 
                :height="280" 
                aspect-ratio="16/9" 
                cover 
                src="https://images.unsplash.com/photo-1484417894907-623942c8ee29?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1920&q=80"
                class="profile-banner"
                gradient="to bottom, rgba(0,0,0,0.05), rgba(13, 17, 28, 0.8)"
            >
                <div class="banner-overlay"></div>
                
                <!-- 个人信息内容区 -->
                <v-row class="fill-height align-end">
                    <v-col cols="12">
                        <v-row align="center" class="mx-3 pb-4">
                            <div class="avatar-wrapper">
                                <v-avatar size="110" class="profile-avatar elevation-5">
                                    <v-img :src="avatarImg" class="avatar-image" />
                                    <div class="avatar-border"></div>
                                </v-avatar>
                            </div>
                            <div class="ml-5 user-info-container">
                                <div class="text-h4 font-weight-medium text-white user-name">{{ userInfo.nickName }}</div>
                                <div class="text-subtitle-1 text-grey-lighten-2 mt-1 user-description">
                                    {{ userInfo.description || '这个人很懒，还没有添加个人介绍' }}
                                </div>
                                <div class="user-stats mt-2">
                                    <span class="stat-item">
                                        <v-icon size="small" color="#7C9CBF" class="mr-1">mdi-movie-open</v-icon>
                                        <span class="text-grey-lighten-3">视频 {{ 8 }}</span>
                                    </span>
                                    <span class="stat-item">
                                        <v-icon size="small" color="#7C9CBF" class="mr-1">mdi-account-multiple</v-icon>
                                        <span class="text-grey-lighten-3">粉丝 {{ 42 }}</span>
                                    </span>
                                    <span class="stat-item">
                                        <v-icon size="small" color="#7C9CBF" class="mr-1">mdi-heart</v-icon>
                                        <span class="text-grey-lighten-3">点赞 {{ 126 }}</span>
                                    </span>
                                </div>
                            </div>
                            <v-spacer></v-spacer>
                            <v-btn 
                                class="edit-btn" 
                                variant="outlined" 
                                color="white" 
                                :size="isSelf ? 'default' : 'large'" 
                                :prepend-icon="isSelf ? 'mdi-pencil' : 'mdi-account-plus'"
                                @click="isSelf ? (editDialog = !editDialog) : followUser()" 
                                rounded
                            >
                                {{ isSelf ? '编辑资料' : '关注' }}
                            </v-btn>
                        </v-row>
                    </v-col>
                </v-row>
            </v-img>

            <!-- 导航标签 -->
            <v-tabs 
                v-model="tab" 
                color="#7C9CBF" 
                bg-color="#1a1b2580"
                slider-color="#7C9CBF"
                align-tabs="center"
                class="nav-tabs"
                height="64"
            >
                <v-tab value="aa" :to="`/user/home${isSelf ? '' : '?lookId=' + userInfo.id}`" class="tab-item">
                    <v-icon class="mr-2">mdi-home</v-icon>
                    主页
                </v-tab>
                <v-tab value="one" to="/user/video" v-if="isSelf" class="tab-item">
                    <v-icon class="mr-2">mdi-movie-open</v-icon>
                    创作中心
                </v-tab>
                <v-tab value="two" to="/user/favorites" v-if="isSelf" class="tab-item">
                    <v-icon class="mr-2">mdi-bookmark</v-icon>
                    收藏夹
                </v-tab>
                <v-tab value="3" to="/user/history" v-if="isSelf" class="tab-item">
                    <v-icon class="mr-2">mdi-history</v-icon>
                    历史记录
                </v-tab>
                <v-tab value="two3" to="/user/classify" v-if="isSelf" class="tab-item">
                    <v-icon class="mr-2">mdi-format-list-bulleted</v-icon>
                    订阅分类
                </v-tab>
                <v-tab value="4" :to="`/user/like${isSelf ? '' : '?lookId=' + userInfo.id}`" class="tab-item">
                    <v-icon class="mr-2">mdi-account-group</v-icon>
                    关注/粉丝
                </v-tab>
            </v-tabs>
        </v-card>

        <!-- 路由视图内容区域 -->
        <v-card class="content-card pa-5 elevation-2" rounded="xl">
            <router-view />
        </v-card>

        <!-- 编辑信息对话框 -->
        <v-dialog v-model="editDialog" max-width="500" transition="dialog-bottom-transition">
            <v-card title="编辑个人资料" class="edit-dialog" rounded="lg">
                <v-divider />
                <v-card-text class="pt-6">
                    <v-form>
                        <div class="text-center mb-5">
                            <v-hover v-slot="{ isHovering, props }">
                                <div class="avatar-edit-container">
                                    <v-avatar v-bind="props" size="120" class="mb-3 mx-auto edit-avatar" @click="avatarFileRef.click()">
                                        <v-img :src="avatarImg" />
                                        <v-overlay :model-value="isHovering == true || uploading > -1" contained scrim="#1a1b25"
                                            class="align-center justify-center avatar-overlay" opacity="0.7" rounded="circle">
                                            <v-icon v-if="uploading == -1" size="large" color="white">mdi-camera</v-icon>
                                            <v-progress-circular v-else :model-value="uploading" color="#7C9CBF" size="64"></v-progress-circular>
                                        </v-overlay>
                                    </v-avatar>
                                    <div class="avatar-glow"></div>
                                </div>
                            </v-hover>
                            <div class="text-body-2 text-grey">点击头像更换</div>
                        </div>

                        <input hidden v-on:change="uploadAvatar" ref="avatarFileRef" type="file" accept="image/*" />
                        
                        <v-text-field 
                            v-model="userInfo.nickName" 
                            label="昵称" 
                            placeholder="请输入昵称"
                            variant="outlined"
                            prepend-inner-icon="mdi-account"
                            class="mb-4 input-field"
                            bg-color="rgba(124, 156, 191, 0.05)"
                        ></v-text-field>
                        
                        <v-textarea 
                            v-model="userInfo.description" 
                            label="个人介绍" 
                            placeholder="请输入个人介绍"
                            variant="outlined"
                            prepend-inner-icon="mdi-card-text-outline"
                            auto-grow
                            rows="3"
                            class="mb-4 input-field"
                            bg-color="rgba(124, 156, 191, 0.05)"
                        ></v-textarea>
                        
                        <v-switch 
                            v-model="userInfo.sex" 
                            :label="userInfo.sex ? '男生' : '女生'" 
                            inset 
                            color="#7C9CBF" 
                            class="mt-2"
                        />
                    </v-form>
                </v-card-text>
                <v-divider />
                <v-card-actions class="pa-4">
                    <v-btn variant="tonal" color="grey" @click="editDialog = false" rounded>取消</v-btn>
                    <v-spacer />
                    <v-btn variant="elevated" color="#7C9CBF" @click="saveInfo()" rounded>
                        <v-icon class="mr-1">mdi-content-save</v-icon>
                        保存
                    </v-btn>
                </v-card-actions>
            </v-card>
        </v-dialog>

        <!-- 提示消息 -->
        <v-snackbar v-model="snackbar.show" :color="snackbar.color" location="top" rounded="pill">
            {{ snackbar.text }}
            <template v-slot:actions>
                <v-btn icon="mdi-close" variant="text" @click="snackbar.show = false"></v-btn>
            </template>
        </v-snackbar>
    </v-container>
</template>

<script setup>
import { computed, onMounted, ref, watch } from 'vue';
import { useRoute } from 'vue-router';
import { apiFileGet, apiUploadFile } from '../../apis/file';
import { apiChangeUserInfo, apiGetUserInfo } from '../../apis/user/user';
import router from '../../router';
import { useUserStore } from '../../stores';

const tab = ref()
const userStore = useUserStore()
const route = useRoute()
const userInfo = ref({})
const editDialog = ref(false)
const avatarFileRef = ref()
const uploading = ref(-1)
const snackbar = ref({
    show: false,
    text: ""
})

const isSelf = computed(() => {
    if (!userInfo.value) return false
    return userStore.$state.info.id == userInfo.value.id
})

const avatarImg = computed(() => {
    if (!userInfo.value) {
        getUserInfo()
        return "/logo.png"
    }
    if (avatarFileRef.value && avatarFileRef.value.files && avatarFileRef.value.files[0]) {
        var URL = window.URL || window.webkitURL;
        return URL.createObjectURL(avatarFileRef.value.files[0])
    }
    if (userInfo.value == null) {
        return "/logo.png"
    }
    if (userInfo.value.avatar == null) return "/logo.png"
    
    return apiFileGet(userInfo.value.avatar)
})

const uploadAvatar = () => {
    if (!avatarFileRef.value.files[0]) return;
    apiUploadFile(avatarFileRef.value.files[0], {
        next: (e) => {
            uploading.value = e.total.percent
        }, error: () => {
            uploading.value = -1
            snackbar.value = {
                text: "上传失败",
                show: true,
                color: "error"
            }
        }, complete: (_e, fileId) => {
            uploading.value = -1
            if (!fileId.state) {
                snackbar.value = {
                    text: fileId.message,
                    show: true
                }
                return;
            }

            userInfo.value.avatar = fileId.data
            snackbar.value = {
                text: "上传完成",
                show: true,
                color: "success"
            }
        }
    })
}

const getUserInfo = () => {
    if (route.query && route.query.lookId) {
        userStore.$patch({
            lookId: route.query.lookId
        })
    } else {
        userStore.$patch({
            lookId: userStore.$state.info.id
        })
    }
    apiGetUserInfo(userStore.$state.lookId).then(({ data }) => {
        if (data.state) {
            userInfo.value = data.data
        }
    })
}

const saveInfo = () => {
    apiChangeUserInfo(userInfo.value).then(({ data }) => {
        snackbar.value = {
            text: data.message,
            show: true,
            color: data.state ? "success" : "error"
        }
        if (!data.state) {
            return;
        }
        editDialog.value = false
        apiGetUserInfo(userInfo.value.id).then(({ data }) => {
            if (data.state) {
                userStore.$patch({
                    info: data.data
                })
            }
        })
    })
}

const followUser = () => {
    // 模拟关注功能
    snackbar.value = {
        text: "关注成功",
        color: "success",
        show: true
    }
}

watch(() => route.query, () => {
    getUserInfo()
}, {
    immediate: true
})

onMounted(() => {
    if (!userStore.$state.token) {
        router.push({ path: "/" })
    }

    userStore.$patch({
        lookId: route.query.lookId || userStore.info.id
    })
    getUserInfo()
})
</script>

<style scoped>
.profile-card {
  overflow: hidden;
  background-color: #1a1b25;
  border: 1px solid rgba(255, 255, 255, 0.05);
  position: relative;
}

.profile-banner {
  position: relative;
  overflow: hidden;
}

.banner-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: 
    radial-gradient(circle at 20% 30%, rgba(124, 156, 191, 0.1), transparent 70%),
    radial-gradient(circle at 80% 20%, rgba(124, 156, 191, 0.05), transparent 50%);
  pointer-events: none;
  z-index: 1;
}

.avatar-wrapper {
  position: relative;
  z-index: 2;
}

.profile-avatar {
  border: 3px solid #1a1b25;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
  background-color: #1a1b25;
  position: relative;
  overflow: hidden;
  transform: translateY(10px);
}

.avatar-image {
  transition: transform 0.5s ease;
}

.profile-avatar:hover .avatar-image {
  transform: scale(1.05);
}

.avatar-border {
  position: absolute;
  top: -3px;
  left: -3px;
  right: -3px;
  bottom: -3px;
  border-radius: 50%;
  border: 3px solid transparent;
  background: linear-gradient(135deg, #7C9CBF, #A3C4E9) border-box;
  -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

.user-info-container {
  position: relative;
  z-index: 2;
  transform: translateY(5px);
}

.user-name {
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  position: relative;
  display: inline-block;
}

.user-name::after {
  content: '';
  position: absolute;
  bottom: -5px;
  left: 0;
  width: 40px;
  height: 3px;
  background: linear-gradient(90deg, #7C9CBF, transparent);
  border-radius: 3px;
}

.user-description {
  max-width: 80%;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.user-stats {
  display: flex;
  gap: 20px;
}

.stat-item {
  display: flex;
  align-items: center;
  transition: transform 0.3s ease;
}

.stat-item:hover {
  transform: translateY(-2px);
}

.edit-btn {
  position: relative;
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  z-index: 2;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
}

.edit-btn:hover {
  background: rgba(255, 255, 255, 0.15);
  transform: translateY(-2px);
}

.nav-tabs {
  position: relative;
  overflow: hidden;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.tab-item {
  font-weight: 500;
  letter-spacing: 0.5px;
  text-transform: none;
  height: 64px;
  opacity: 0.8;
  transition: all 0.3s ease;
}

.tab-item:hover {
  opacity: 1;
  background: rgba(255, 255, 255, 0.05);
}

.content-card {
  background: #1a1b25;
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.edit-dialog {
  background: #1a1b25;
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.avatar-edit-container {
  position: relative;
  display: inline-block;
}

.edit-avatar {
  position: relative;
  z-index: 2;
  border: 4px solid #1a1b25;
  transition: all 0.3s ease;
  cursor: pointer;
}

.edit-avatar:hover {
  transform: scale(1.02);
}

.avatar-overlay {
  border: 2px solid rgba(124, 156, 191, 0.3);
}

.avatar-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 120px;
  height: 120px;
  border-radius: 50%;
  z-index: 1;
  background: rgba(124, 156, 191, 0.2);
  filter: blur(10px);
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0% { opacity: 0.5; transform: translate(-50%, -50%) scale(0.95); }
  50% { opacity: 0.8; transform: translate(-50%, -50%) scale(1.05); }
  100% { opacity: 0.5; transform: translate(-50%, -50%) scale(0.95); }
}

.input-field {
  border-radius: 8px;
}

.input-field :deep(.v-field__outline) {
  opacity: 0.7;
}

.input-field:hover :deep(.v-field__outline) {
  opacity: 1;
}

@media (max-width: 768px) {
  .user-info-container {
    margin-left: 0;
    margin-top: 16px;
  }

  .profile-avatar {
    transform: translateY(0);
  }

  .user-description {
    max-width: 100%;
  }
}
</style>